<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<!-- 背景图 -->
		<moxi-nav :set="navSet"></moxi-nav>
		<view :class="list.mod_class" :style="list.css" v-for="(list,key) in modData" :key="key">
			<view
				v-if="list.name == 'login'"
				class="login-box"
				style="background-color: #fff; margin-top: 308rpx; border-radius: 24rpx 24rpx 0 0; width: 100%;"
			>
				<!-- 头像 -->
				<view class="box" style="position: relative; padding-top: 104rpx;">
					<img
						:src="list.set.bcolor?list.set.bcolor:'https://file.moxikeji.net/images/icon/bg0401.png'"
						alt
						style="height: 440rpx; position: absolute; top: -308rpx; left: 50%; transform: translateX(-50%); width: 100vw; z-index: -1;"
					/>
					<img class="avatar" :src="list.set.logo" alt />
					<view class="selectorArea">
						<text
							:class="{ 'selector_active': isCodeLogin }"
							:style="{ color: isCodeLogin ? app_color : '#8D8D8D' }"
							@click="switchLoginType(true)"
						>快捷登录</text>
						<text
							:class="{ 'selector_active': !isCodeLogin }"
							:style="{ color: isCodeLogin ? '#8D8D8D' : app_color }"
							@click="switchLoginType(false)"
						>账号密码</text>
					</view>
					<!-- v-if="appType != 'weixin'" -->
					<view class="form">
						<!-- 账号验证码 -->
						<view class="input" v-if="isCodeLogin">
							<input
								type="number"
								v-model="info.phone"
								placeholder="请输入手机号码"
								@focus="focusedInput = 'phone'"
								@blur="focusedInput = null"
								:style="{
									border: focusedInput === 'phone' ? '1px solid ' + app_color : '1px solid transparent'
								}"
							/>
						</view>
						<view class="input" :style="{ display: isCodeLogin ? 'block' : 'none' }">
							<input
								type="number"
								v-model="info.code"
								placeholder="请输入验证码"
								@focus="focusedInput = 'code'"
								@blur="focusedInput = null"
								:style="{
									border: focusedInput === 'code' ? '1px solid ' + app_color : '1px solid transparent'
								}"
							/>
							<!-- ... 验证码按钮部分保持不变 ... -->
							<text
								class="input-code"
								@click="get_Code()"
								:style="{ background: '#ffffff', color: app_color }"
								v-if="time == 60"
							>获取验证码</text>
							<text class="input-code" :style="{ background: '#eee', color: '#666' }" v-else>{{ time }}秒后再试</text>
						</view>

						<view class="input" :style="{ display: isCodeLogin ? 'none' : 'block' }">
							<input
								type="text"
								v-model="infoPassword.username"
								placeholder="请输入用户名/手机"
								@focus="focusedInput = 'phone'"
								@blur="focusedInput = null"
								:style="{
									border: focusedInput === 'phone' ? '1px solid ' + app_color : '1px solid transparent'
								}"
							/>
							<input
								type="password"
								v-model="infoPassword.password"
								placeholder="请输入密码"
								@focus="focusedInput = 'password'"
								@blur="focusedInput = null"
								:style="{
									border: focusedInput === 'password' ? '1px solid ' + app_color : '1px solid transparent'
								}"
							/>
						</view>
						<button
							class="login-button"
							type="default"
							@click="login()"
							:style="{ background: app_color, color: '#fff' }"
							style="margin-top: 64rpx;"
						>登录</button>
						<!-- 不同小程序的快捷登录键 -->
						<!-- 按钮 -->
						<!-- #ifdef MP-WEIXIN -->
						<view
							style="margin-top: 64rpx; color: #8D8D8D; font-size: 24rpx; text-align: center;"
							
						>
							<text>或</text>
						</view>
						<button
							type="primary"
							open-type="getPhoneNumber"
							@getphonenumber="getphonenumber"
							class="login-button"
							style="color: #3D3D3D ; text-align: center; background-color: #f7fafc;"
						
						>手机号快捷登录</button>
						<!-- #endif -->
						<!-- #ifdef MP-TOUTIAO -->
						<view
							style="margin-top: 64rpx; color: #8D8D8D; font-size: 24rpx; text-align: center;"
						>
							<text>或</text>
						</view>
						<button
							type="primary"
							@click="douyinLogin"
							class="login-button"
							style="color: #3D3D3D ; text-align: center; background-color: #f7fafc;"
					
						>抖音快捷登录</button>
						<!-- #endif -->
						
						<!-- #ifdef MP-BAIDU -->
						<view
							style="margin-top: 64rpx; color: #8D8D8D; font-size: 24rpx; text-align: center;"
						>
							<text>或</text>
						</view>
						<button
							type="primary"
							@click="baiduLogin"
							class="login-button"
							style="color: #3D3D3D ; text-align: center; background-color: #f7fafc;"
											
						>百度快捷登录</button>
						<!-- #endif -->
						
						<!-- #ifdef MP-XHS -->
						<view
							style="margin-top: 64rpx; color: #8D8D8D; font-size: 24rpx; text-align: center;"
						>
							<text>或</text>
						</view>
						<button
							type="primary"
							@click="xhsLogin"
							class="login-button"
							style="color: #3D3D3D ; text-align: center; background-color: #f7fafc;"
											
						>小红书快捷登录</button>
						<!-- #endif -->
						
						<!-- #ifdef MP-KUAISHOU -->
						<view
							style="margin-top: 64rpx; color: #8D8D8D; font-size: 24rpx; text-align: center;"
						>
							<text>或</text>
						</view>
						<button
							type="primary"
							@click="ksLogin"
							class="login-button"
							style="color: #3D3D3D ; text-align: center; background-color: #f7fafc;"
											
						>快手快捷登录</button>
						<!-- #endif -->
					</view>
				</view>
			</view>
			<view style="z-index: 110;" v-else>
				<moxi-index :list="list"></moxi-index>
			</view>
		</view>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>
<script>

export default {
	data() {
		return {
			page: "",
			info: {
				phone: "",
				code: "",
		
			},
			infoPassword: {
				username: "", // 用户名
				password: "", // 密码
			},
			phone: "",
			code: "",
			password: "",
			time: 60,
			isCodeLogin: true, // 新增变量，控制登录方式 true 验证码登录 false 密码登录
			focusedInput: null, // 新增，用于记录当前获得焦点的输入框
		};
	},
	onShow() {
	},
	onLoad(param) {
		if (param.page) {
			this.page = decodeURIComponent(param.page);	
		}
	},
	methods: {
		// #ifdef MP-KUAISHOU
		ksLogin() {
			let self = this;
			uni.login({
				provider: 'kuaishou', //使用微信登录
				success: function (loginRes) {
					// console.log('js_code:',loginRes.code);
					self.moxiPost("/plugin/kuaishou/index/index/login", { js_code: loginRes.code }, (data) => {
						// console.log('openid:',data.data.openid);
						self.moxiPost('/index/app/login', { unicode: data.data.openid }, (RES) => {
							self.back();
						})
					})
					// console.log(loginRes.code);
				}
			});
		},
		// #endif
		
		
		//#ifdef MP-XHS
		xhsLogin(){
			let self = this;
			uni.login({
			  provider: 'xhs', //使用微信登录
			  success (loginRes){
				  //获取得到的是code
				  // console.log('code:',loginRes);
				  //将code 带入login,直接获取对应的openid  token
				self.moxiPost('/plugin/xhs/index/index/login', { code:loginRes.code },  (data)=> {
					//缓存token openid 2小时过期
					// console.log('openid:',data.data.openid);
					self.moxiPost('/index/app/login', { unicode: data.data.openid }, (RES) => {
						self.back();
					})
				})
			  },fail(e) {
				if(e.errCode == 10004){
					self.msg('请先登录小红书APP')
				}else{
					self.msg(e.errMsg)
				}
			  }
			});
			
		},
		//#endif
		
		// #ifdef MP-BAIDU
		baiduLogin(){
			let self = this;
			uni.login({
			  provider: 'baidu', //使用微信登录
			  success (loginRes){
				self.moxiPost('/index/app/login', { get_phone: 0, unicode:loginRes.code },  (data)=> {
					console.log('ok',data);
					self.back();
				})
			  },fail(e) {
				if(e.errCode == 10004){
					self.msg('请先登录百度APP')
				}else{
					self.msg(e.errMsg)
				}
			  }
			});
		},
		// #endif
		// #ifdef MP-TOUTIAO
		douyinLogin() {
			let self = this;
			uni.login({
				provider: 'toutiao', //使用微信登录
				success: function (loginRes) {
					if (!loginRes.isLogin) {
						self.msg("请先登录抖音APP");
						return false;
					}
					if (!loginRes.code || !loginRes.anonymousCode) {
						self.msg("登录抖音失败");
						return false;
					}
					//access_token   ->  调用其他的api
					self.moxiPost("/plugin/toutiao/index/index/login", { code: loginRes.code, anonymous_code: loginRes.anonymousCode }, (data) => {
						self.moxiPost('/index/app/login', { unicode: data.data }, (RES) => {
							self.back();
						})
					})
					// console.log(loginRes.code);
				}
			});
		},
		// #endif
		getphonenumber(e) {
			if (!e.detail.code) {
				this.msg(e.detail.errMsg);
				return false;
			}
			let self = this;
			this.moxiPost('/index/app/login', { get_phone: 1, unicode: e.detail.code }, function (data) {
				self.back();
			})
		},
		login() {
			if(this.isCodeLogin){
				if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.info.phone)) {
					this.msg('请输入正确手机号');
					return false;
				}
				if (!this.info.code && this.isCodeLogin) {
					this.msg('请输入验证码');
					return false;
				}
			}else{
				if (!this.infoPassword.password && !this.isCodeLogin) {
					this.msg('请输入密码');
					return false;
				}
			}
			
			let self = this;
			if (this.isCodeLogin) {
				this.moxiPost('/index/app/login', this.info, function (data) {
					self.back();
				})
			} else {
			
				this.moxiPost('/index/app/login', this.infoPassword, function (data) {
					self.back();
				})
			}
		},
		back() {
			if (this.page.length) {
				uni.reLaunch({
					url: this.page.indexOf('/') === 0 ? this.page : "/" + this.page
				});
			} else {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		},
		get_Code() {
			if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.info.phone)) {
				this.msg('请输入正确手机号');
				return false;
			}
			if (this.time < 60) {
				if (this.time > 0) {
					this.msg(this.time + '秒后再试');
					return;
				}
			} else {
				var that = this;
				//这里请求后台获取短信验证码
				this.moxiPost('/index/app/get_code', { phone: this.info.phone }, function (data) {
					that.time = 59;
					var interval = setInterval(() => {
						if (that.time <= 0) {
							that.time = 60;
							clearInterval(interval)
						} else {
							that.time--;
						}
					}, 1000);
					that.msg(data.hint);
				})
			}
		},
		checkLogin() {
			const param = this.requestParam({});
			if (param.user_id) {
				this.back()
			}
		},
		// 重置表单数据
		switchLoginType(isCodeLogin) {
			this.isCodeLogin = isCodeLogin;
			// 重置表单数据
			if (isCodeLogin) {
				// 切换到验证码登录，清空密码
				this.infoPassword.password = '';
			} else {
				// 切换到密码登录，清空验证码
				this.info.code = '';
			}
		},
	}
};
</script>
<style scoped>
.input-icon {
	position: absolute;
	left: 14px;
	top: 17px;
	width: 16px;
	height: 16px;
}
.login-box {
	display: flex;
	align-items: center;
	justify-content: center;
}

.form {
	text-align: left;
}
.box {
	margin: 0rpx auto 150rpx;
	display: flex;
	flex-direction: column;
	width: 80%;
	max-width: 600px;
	text-align: center;
}

.avatar {
	height: 160rpx;
	width: 160rpx;
	object-fit: cover;
	position: absolute;
	top: -104rpx;
	left: 0;
}

.selectorArea {
	display: flex;
	justify-content: space-around;
	flex-wrap: nowrap;
	font-size: 24rpx;
	font-weight: 600;
	white-space: nowrap;
	line-height: 24rpx;
	height: 48rpx;
	align-items: center;
	margin-bottom: 8rpx;
}

.selector_active {
	position: relative;
}

.selector_active::before {
	content: "";
	position: absolute;
	width: 50%;
	height: 8rpx;
	bottom: -16rpx;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	border-radius: 4rpx;
	background-color: currentColor;
}

.input {
	position: relative;
	width: 100%;
}

.input input {
	background-color: #f7fafc;
	padding: 0 48rpx;
	border-radius: 16rpx;
	width: 81%;
	font-size: 20rpx;
	height: 80rpx;
	margin-top: 64rpx;
	border: 1px solid transparent;
}

.input-code {
	font-size: 11px;
	position: absolute;
	right: 36rpx;
	top: 50%;
	transform: translateY(-50%);
	padding: 8rpx 20rpx;
	z-index: 9999;
	border-radius: 15px;
}

.login-button {
	border-radius: 16rpx;
	color: #ffffff;
	border: none;
	margin-top: 32rpx;
	font-size: 24rpx;
	height: 80rpx;
	line-height: 80rpx;
}
button::after {
	border: none;
}
</style>
